<script setup lang="ts" name="Demo">
console.log('修改打印内容');
</script>

<template>
  <div class="demo-content px-12px pb-100px">
    <h1>测试-h1</h1>
    <h1>基础使用</h1>
    <div class="flex-center color-amber">
      <div class="font-20px bg-blue">这是一段测试文本</div>
    </div>
    <h1>图标集合</h1>
    <div
      flex
      flex-wrap
    >
      <div class="i-solar:airbuds-check-bold w-5em h-5em" />
      <!-- <div class="i-solar:4k-linear w-5em h-5em"></div> -->
      <div class="apply_div">转为背景</div>
      <!-- <div class="i-noto:admission-tickets w-5em h-5em"></div> -->
      <div class="i-svg-spinners:bars-scale w-5em h-5em" />
      <!-- <div class="i-svg-spinners:blocks-shuffle-3 w-5em h-5em"></div> -->
      <!-- <div class="i-svg-spinners:clock w-5em h-5em"></div> -->
      <div class="i-skill-icons:javascript?bg w-5em h-5em color-blue-4">
        <span>转为背景</span>
      </div>
      <div class="i-skill-icons:javascript?mask w-5em h-5em text-blue-5">
        <p>1</p>
        <span>遮罩</span>
      </div>
    </div>
    <h1>属性化</h1>
    <div text="red-4 20px">这是一段测试文本</div>
    <h1>属性冲突(un-)</h1>
    <h1>
      <span>指令转换器</span>
      <span>1</span>
    </h1>
    <div
      class="group"
      font-30px
    >
      测试
    </div>
    <h1>编译类转换器</h1>
    <div class=":uno: text-center text-green">将一组类样式编译为一个类。</div>
    <h1>快捷方式shortcuts</h1>
    <button class="btn btn-red">按钮</button>
  </div>
</template>

<style scoped lang="less">
.apply_div {
  @apply i-fluent-emoji:avocado?bg w-5em h-5em text-red font-20px flex-center;
}
.group {
  --uno: flex-center bg-red-4 text-white;
}
.content {
}
</style>
